import React,{ useState, useEffect,useRef } from 'react';
import './index.scss'
const Tolist=()=>{

  const [todos, setTodos] = useState([])
  const [inputValue,setInputValue]=useState('')
  const delectClick=(i)=>{    
    setTodos(todos.filter((_, index) => index !== i));    
  }
  const addClick=(e)=>{
    setInputValue(e.target.value)
    }
  const newAdd=()=>{
    setTodos([...todos,inputValue])
    setInputValue('')
  }
    

  return(
    <div id='box'>
       <input type="text" id='input' value={inputValue}  onChange={addClick} placeholder='请输入内容' />
       <span onClick={newAdd}>添加</span>
       <div className='content'>
           {
            todos.map((item,i)=>{
              return <div key={i}  style={{width:'100%',display:'flex',margin:'30px,0,0,0'}}>
                  <p>{i}</p>
                  <p>{item}</p>
                  <button onClick={()=>delectClick(i)}>删除</button>
              </div>
            })
           }
       </div>
       <div className="footer">
        <label htmlFor="quan">全选</label>
        <input type="checkbox" className='quan' />
        <label htmlFor="fan">反选</label>
        <input type="checkbox" className='fan' />
       </div>
       
    </div>
  )
  }
export default Tolist;


